<template>
	<view class="nearby-preview-tabs u-flex fw-500" :class="{'u-flex-end':value === 2}">
		<view class="u-flex-xy-center" :class="{ 'nearby-preview-tabs__left--active': value === 1 }" @tap="tabChange(1)">
			<text>{{ $t('nearby.快递配送') }}</text>
		</view>
		<view class="u-flex-xy-center" :class="{ 'nearby-preview-tabs__right--active': value === 2 }" @tap="tabChange(2)">
			<text>{{ $t('nearby.到店自取') }}</text>
		</view>
	</view>
</template>

<script>
export default {
	// #ifdef MP-WEIXIN
	// 将自定义节点设置成虚拟的，更加接近Vue组件的表现
	options: {
		virtualHost: true
	},
	// #endif
	props:{
		value:Number
	},
	methods:{
		tabChange (value) {
			this.$emit('input',value)
		}
	}
}
</script>

<style lang="scss">
.nearby-preview-tabs {
	border-radius: 20rpx 20rpx 0 0 ;
	overflow: hidden;
	align-items: flex-end;
	> view {
		flex: 0 0 calc(50% - 30rpx) ;
		background-color: $base-color-white;
		height: 98rpx;
		font-weight: 600;
	}
	&__left--active,
	&__right--active{
		flex: 0 0 calc(50% + 30rpx) !important;
		background-color: var(--color-primary) !important;
		color: $base-color-white;
		height: 88rpx !important;
		position: relative;
		font-weight: 400 !important;
		&::after{
		  content: ' ';
		  position: absolute;
		  top: 0;
		  border-width: 88rpx 16rpx;
		  border-style: solid;
		  border-color:var(--color-primary) transparent transparent transparent;
		}
	}
	&__left--active{
		border-radius: 12rpx 0 0 12rpx;
		&::after{
		 right: -16rpx;
		}
	}
	&__right--active{
		border-radius: 0 12rpx 12rpx 0;
		&::after{
		 left: -16rpx;
		}
	}
}
</style>
